<!--
 * 功能： 体系数据item
 * 作者： caihan
 * 日期:  2021-8-17 2:27:53 ?F10: PM?
 -->
<template>
	<view class="flex-column my20 mx30 bcmain shadow" style="border-radius: 10rpx;">
		<view class="fs32 fbold cfff mx30 mt20" @click.stop="onClickTreeItem()">{{data.name}}</view>
		<view class="flex-wrap mx30 mt20">
			<block v-for="(item, index) in data.children" :key="index">
				<view class="item line-h1" @click.stop="onClickTreeChildrenItem(item)">
					<view>{{ item.name }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tree-item",
		components: {},
		data() {
			return {}
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						children: [{
							courseId: 13,
							id: 60,
							name: "Android Studio相关",
							order: 1000,
							parentChapterId: 150,
							userControlSetTop: false,
							visible: 1
						}],
						courseId: 13,
						id: 150,
						name: "开发环境",
						order: 1,
						parentChapterId: 0,
						userControlSetTop: false,
						visible: 1
					}
				}
			}
		},
		computed: {
			//计算属性
		},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			onClickTreeItem: function() {
				// 体系下的文章
				// https://www.wanandroid.com/article/list/0/json?cid=60
				// 方法：GET
				// 参数：
				// 	cid 分类的id，上述二级目录的id
				// 	页码：拼接在链接上，从0开始。
				this.$navTo(`/packages/article/article-list-page?cid=${this.data.id}`);
			},
			onClickTreeChildrenItem: function(item) {
				// 体系下的文章
				// https://www.wanandroid.com/article/list/0/json?cid=60
				// 方法：GET
				// 参数：
				// 	cid 分类的id，上述二级目录的id
				// 	页码：拼接在链接上，从0开始。
				this.$navTo(`/packages/article/article-list-page?cid=${item.id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		background: #f0f0f0;
		height: 50rpx;
		line-height: 50rpx;
		max-width: 100%;
		margin: 0 30rpx 30rpx 0;
		padding: 0 10rpx;
		border-radius: 10rpx;
		color: $c333;
	}
</style>
